<template>

	<view>
		<!--顶部区域-->
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">button,按钮</view>
		</view>
		<!--主题-->
		<view class="smart-padding-wrap">
			<button type="primary">页面主操作 normal</button>
			<button type="primary" :loading="loading">页面主操作 loading</button>
			<button type="primary" disabled="false">页面主操作 disabled</button>

			<button type="default">页面次要操作 normal</button>
			<button type="default" disabled="false">页面次要操作 disabled</button>

			<button type="warn">警告类操作 warn</button>
			<button type="warn" @click="goto()">警告类操作 Normal</button>
			<button type="warn" disabled="false">警告类操作 disabled</button>

			<view class="button-sp-area">
				<button type="primary" plain="true">镂空按钮</button>
				<button type="default" plain="true">镂空按钮</button>
				<button type="warn" plain="true">镂空按钮</button>
				<button type="default" disabled="true" plain="true">不可点击的按钮</button>
				<button class="mini-btn" type="primary" size="mini">按钮</button>
				<button class="mini-btn" type="default" size="mini">按钮</button>
				<button class="mini-btn" type="warn" size="mini">按钮</button>
			</view>
			<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS -->
			<button open-type="launchApp" app-parameter="uni-app" @error="openTypeError">打开APP</button>
			<button open-type="feedback">意见反馈</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goto() {
				// 跳转方法
				uni.showToast({
					title: '按钮点击',
					icon: 'success'
				})
			}
		}
	}
</script>

<style>
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.mini-btn {
		margin-right: 30rpx;
	}
</style>